import React, { useEffect, useState } from 'react'
import "./button.scss"
import { hexToRgb } from '../../utils/colorUtil'

/**
 * @param type 按钮类型
 * @param round 是否圆角
 * @param color 按钮颜色
 * @param circle 是否为圆形按钮
 * @param size 按钮尺寸
 * @param prefixIcon 头部图标
 * @param suffixIcon 尾部图标
 * @param disabled 是否可点击
 * @param loading 等待动画
 */
interface Props {
    children?: React.ReactNode,
    onClick?: React.MouseEventHandler,
    type?: "primary" | "success" | "info" | "warning" | "error",
    round?: boolean,
    color?: string,
    circle?: boolean,
    size?: 'default' | 'large' | 'small',
    prefixIcon?: React.ReactNode,
    suffixIcon?: React.ReactNode,
    disabled?: boolean,
    loading?: boolean,
    className?: string
}

const Button = ({ 
    children, 
    onClick, 
    type, 
    round = false, 
    circle = false, 
    size = "default", 
    disabled = false, 
    loading = false, 
    prefixIcon, 
    suffixIcon, 
    color = "",
    className }: Props) => {
    const [hoverBgColor, setHoverBgColor] = useState<string>("")
    const [textColor, setTextColor] = useState<string>("")
    const [bgColor, setBgColor] = useState<string>(color)

    useEffect(() => {
        // 按钮颜色
        if (color) {
            let color1: string = color
            let bgColor1: string = color
            if (color1.includes("#")) {
                color1 = hexToRgb(color)
            }
            let colorArr: number[] = []
            color1 = color1.trim().replace(" ", "").replace(")", "")
            if (color1.includes("rgba")) {
                color1 = color1.replace("rgba(", "")
            } else {
                color1 = color1.replace("rgb(", "")
            }
            colorArr = color1.split(",").map(Number)
            const textColorArr = colorArr.map(item => 255 - item)
            const grayLevel: number = textColorArr[0] * 0.299 + textColorArr[1] * 0.587 + textColorArr[2] * 0.114;
            let textColor1: string
            if (grayLevel >= 150) {
                textColor1 = "#ffffff"
            } else {
                textColor1 = "var(--pe-color-text)"
            }
            const colorHoverArr = colorArr.map((item, index) => {
                if (index === 1 || index === 2) {
                    return item > 127 ? item - 100 : item + 100
                }
                return item
            })
            const colorDisabledArr = colorArr.map((item, index) => {
                if (index === 1 || index === 2) {
                    return item > 127 ? item - 128 : item + 128
                }
                return item
            })
            let hoverBgColor1: string
            if (colorArr.length > 3) {
                hoverBgColor1 = `rgba(${colorHoverArr.join(",")})`
                if (disabled) {
                    bgColor1 = `rgba(${colorDisabledArr.join(",")})`
                    hoverBgColor1 = bgColor1
                }
            } else {
                hoverBgColor1 = `rgb(${colorHoverArr.join(",")})`
                if (disabled) {
                    bgColor1 = `rgb(${colorDisabledArr.join(",")})`
                    hoverBgColor1 = bgColor1
                }
            }
            setHoverBgColor(hoverBgColor1)
            setTextColor(textColor1)
            setBgColor(bgColor1)
        } else {
            if (disabled) {
                let bgColor1: string
                if (type) {
                    bgColor1 = `var(--pe-color-hover-${type})`
                } else {
                    bgColor1 = "var(--pe-color-hover-default)"
                }
                setHoverBgColor(bgColor1)
                setBgColor(bgColor1)
            }
        }
    }, [color, disabled, type])

    return (
        <button className={[
            'pe-button',
            className,
            `pe-button-type-${type}`,
            round ? 'pe-button-round' : '',
            circle ? 'pe-button-circle' : '',
            `pe-button-size-${size}`].join(" ").trim()}
            onClick={onClick}
            style={{
                ...{ cursor: disabled || loading ? 'not-allowed' : 'pointer' },
                ...(color || disabled || loading ? {
                    '--pe-button-hover-bg-color': hoverBgColor,
                    '--pe-button-border-color': bgColor,
                    '--pe-button-bg-color': bgColor,
                    '--pe-button-text-color': textColor
                } : {})
            }}
            disabled={disabled}>
            {
                loading ? (<i className="pe-icon pe-button-icon is-loading" style={{ marginRight: prefixIcon ? '5px' : 0 }}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                            d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z">
                        </path>
                    </svg>
                </i>) : null
            }
            {
                prefixIcon || prefixIcon === 0 ? (
                    <span className="pe-button-icon">
                        {prefixIcon}
                    </span>
                ) : null
            }
            {/* <!-- 定义插槽用于让用户自定义按钮的内容 --> */}
            {
                children || children === 0 ? (
                    <div className="pe-button-content">
                        {children}
                    </div>
                ) : null
            }
            {
                suffixIcon || suffixIcon === 0 ? (
                    <span className="pe-button-icon">
                        {suffixIcon}
                    </span>
                ) : null
            }
        </button>
    )
}

export default Button
